import React from 'react';
import {StyleSheet, Image} from 'react-native';
// import Ionicons from 'react-native-vector-icons/Ionicons';
import {createBottomTabNavigator} from 'react-navigation-tabs';

import home from '../style/img/home.png';
import selectHome from '../style/img/selectHome.png';
import map from '../style/img/map.png';
import selectMap from '../style/img/selectMap.png';

import PageTabOne from '../screens/PageTabOne';
import PageTabTwo from '../screens/PageTabTwo';

const BottomAppNavigator = createBottomTabNavigator({
  Home: {
    screen: PageTabOne,
    navigationOptions: {
      tabBarLabel: '首页',
      tabBarIcon: ({focused, tintColor}) => (
        <Image
          source={focused ? selectHome : home}
          style={styles.tabBarIconStyle}
        />
      ),
    },
  },
  Details: {
    screen: PageTabTwo,
    navigationOptions: {
      tabBarLabel: '地图',
      tabBarIcon: ({focused, tintColor}) => (
        <Image
          source={focused ? selectMap : map}
          style={styles.tabBarIconStyle}
        />
      ),
    },
  },
});

const styles = StyleSheet.create({
  tabBarIconStyle: {
    width: 30,
    height: 30,
  },
});

export default BottomAppNavigator;
